<template>
	<view class="font setting">
		 <cc-popup :isShow='isshow' width="80%" height="30%" radius="16rpx">
			<!-- 自定义展示内容 -->
			<view class="modelContent">
				<button class="jumpButton" @click="handlingSetting(1)">跳转自定义图文页</button>
				<button class="jumpButton" @click="handlingSetting(2)">跳转外链</button>
			</view>
			<!-- 自定义关闭按钮 -->
			<view class="close" @click="isshow=false">✕</view>
		</cc-popup>
		<cc-popup :isShow='isShareShow' width="70%" height="15%" radius="16rpx">
			<!-- 自定义展示内容 -->
			<view class="modelContent">
				<button class="jumpButton" @click="handlingSetting(3)">分享</button>
				<!-- <button class="jumpButton" @click="handlingSetting(4)">查询</button> -->
			</view>
			<!-- 自定义关闭按钮 -->
			<view class="close" @click="isShareShow=false">✕</view>
		</cc-popup>
		<view class="card">
			<h5>基本设置</h5>
			<view class="uni-list">
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">设置开始及结束时间:</view>
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
				</view>
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db">开始前提示语:</view>
					<input  type="text" placeholder="请输入内容" v-model="beforeTheStartOfTheClues" >
				</view>
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db">结束后提示语:</view>
					<input  type="text" placeholder="请输入内容" v-model="afterTheEndOfTheClues">
				</view>
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db">提交问卷上限:</view>
					<uni-number-box :min="1" v-model="ceiling"></uni-number-box>
				</view>
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db">问卷上限提示:</view>
					<input  type="text" placeholder="请输入内容" v-model="questionnaireLimitTip">
				</view>
			</view>
		</view>
		<view class="card">
			<h5>提交次数限制</h5>
			<view class="uni-list">
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">ip地址限制作答:</view>
					<switch :checked="ipLimit" @change="ipLimitChange" />
				</view>
				<view class="ip" v-show="ipLimit">
					<radio-group @change="ipChange">
						<radio class="radio" value="0" :checked="!ipList.type"/>账号限制作答
						<radio class="radio" value="1" :checked="ipList.type"/>每天限制作答
					</radio-group>
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">作答次数:</view>
						<uni-number-box :min="1" v-model="ipList.ceiling"></uni-number-box>
					</view>
				</view>
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">微信限制作答:</view>
					<switch :checked="weChatLimit" @change="weChatLimitChange" />
				</view>
				<view class="wechat" v-show="weChatLimit">
					<radio-group @change="wechatChange">
						<radio class="radio" value="0" :checked="!weChatList.type"/>账号限制作答
						<radio class="radio" value="1" :checked="weChatList.type"/>每天限制作答
					</radio-group>
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">作答次数:</view>
						<uni-number-box :min="1" v-model="weChatList.ceiling"></uni-number-box>
					</view>
				</view>
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">手机号限制作答:</view>
					<switch :checked="phoneLimit" @change="phoneLimitChange" />
				</view>
				<view class="phone" v-show="phoneLimit">
					<radio-group @change="phoneChange">
						<radio class="radio" value="0" :checked="!phoneList.type"/>账号限制作答
						<radio class="radio" value="1" :checked="phoneList.type"/>每天限制作答
					</radio-group>
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">作答次数:</view>
						<uni-number-box :min="1" v-model="phoneList.ceiling"></uni-number-box>
					</view>
				</view>
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">自定义重复作答提示:</view>
					<switch :checked="repeatAnswer" @change="repeatAnswerChange" />
				</view>
				<view class="uni-list-cell uni-list-cell-pd" v-show="repeatAnswer">
					<view class="uni-list-cell-db">请输入重复提示:</view>
					<input  type="text" v-model="repeatTip" style="border: 1px solid #7c7c7c;">
				</view>
			</view>
		</view>
		<view class="card">
			<h5>其他</h5>
			<view class="uni-list">
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">提交问卷后处理方式</view>
					<view class="textStyle" @click="handlingSelect">{{handling?"已设置":"未设置"}} ></view>
				</view>
				<view class="custom uni-list-cell-pd">
					<view class="uni-list-cell-db">分享与查询</view>
					<view class="textStyle" @click="shareShow">{{shareWithTheQuery?"已设置":"未设置"}} ></view>
				</view>
			</view>
		</view>
		<button @click="sure" class="mybutton" style="background-color: #80b156;color: white;">确认</button>
		<button @click="back" class="mybutton">返回</button>
	</view>
</template>

<script>
import { empty } from '../../uni_modules/uv-ui-tools/libs/function/test'
	export default{
		data() {
			return {
				formid:"", //问卷id
				datetimerange: [], //设置开始及结束时间
				ceiling:10, //问卷上限数量
				ipLimit:false,  //是否开启ip地址限制
				ipList:{	
							ceiling:1, //作答次数
							type:0		//限制作答类型
						},
				weChatLimit:false,  //是否开启微信限制
				weChatList:{
					ceiling:1, //作答次数
					type:0		//限制作答类型
				},
				phoneLimit:false,  //是否开启手机号限制
				phoneList:{
					ceiling:1, //作答次数
					type:0		//限制作答类型
				},
				repeatAnswer:false,	//是否开启自定义重复作答提示
				repeatTip:"", //自定义重复作答内容
				beforeTheStartOfTheClues:"", //开始前提示语
				afterTheEndOfTheClues:"", //结束后提示语
				questionnaireLimitTip:"", //问卷上限提示
				/****  弹窗需要的 *******/
				isshow: false,
				isShareShow:false,
				/*******  提交问卷后处理方式   ******/
				handling:false,	//提交问卷后处理方式是否设置
				/*******  分享与查询 ***********/
				shareWithTheQuery:false, //分享与查询是否设置
			}
		},
		watch:{
			'ipList.type':{
				handler(newvalue){
					if(newvalue){
						this.isIp = false
					}else{
						this.isIp = true
					}
				},immediate:true
			}
		},
		onLoad:function(data){
			var _this = this
			this.formid = data.formid
			let parmas = {
				formid:this.formid
			}
			this.$request('/QuestionnaireSettingController/GetQuestionnaireSetting','GET',parmas)
			.then(res=>{
				console.log(res);
				if(!res.data || !res.data.data){
					return
				}
				let a = res.data.data
				this.datetimerange = JSON.parse(a.dateTimeRange)
				this.ceiling = a.ceiling
				this.ipLimit = a.isIp
				this.phoneLimit = a.isPhone
				this.weChatLimit = a.isWechat
				this.beforeTheStartOfTheClues = a.beforeTheStartOfTheClues
				this.afterTheEndOfTheClues = a.afterTheEndOfTheClues
				this.questionnaireLimitTip = a.questionnaireLimitTip
				this.handling = +a.handling
				this.shareWithTheQuery = +a.shareWithTheQuery
				this.repeatAnswer = +a.repeatAnswer
				this.repeatTip = a.repeatTip
				this.ipList = JSON.parse(a.ipLimit)
				this.weChatList = JSON.parse(a.weChatLimit)
				this.phoneList = JSON.parse(a.phoneLimit)
			})
		},
		onShow:function(){
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if(currPage.data.handling){
				this.handling = currPage.data.handling
			}
			else if(currPage.data.shareWithTheQuery){
				this.shareWithTheQuery = currPage.data.shareWithTheQuery
			}
		},
		methods:{
			sure(){
				if(empty(this.datetimerange)){
					if(this.beforeTheStartOfTheClues || this.afterTheEndOfTheClues){
						uni.showToast({
							title:"请设置开始及结束时间再设置提示语",
							icon:"none"
						})
						return ;
					}
				}
				let data = {
					formid:this.formid,
					dateTimeRange :JSON.stringify(this.datetimerange),//问卷开始及结束时间
					ceiling:this.ceiling, //问卷答题上限
					repeatAnswer:this.repeatAnswer,//是否开启自定义重复作答提示
					repeatTip:this.repeatTip,//重复作答提示内容
					handling:this.handling,//提交问卷后处理方式是否设置
					shareWithTheQuery:this.shareWithTheQuery,//分享与查询是否设置
					ipLimit:this.ipLimit?JSON.stringify(this.ipList):"",//ip地址限制
					weChatLimit:this.weChatLimit?JSON.stringify(this.weChatList):"",//微信限制
					phoneLimit:this.phoneLimit?JSON.stringify(this.phoneList):"",//手机号限制
					isIp:this.ipLimit,
					isWechat:this.weChatLimit,
					isPhone:this.phoneLimit,
					beforeTheStartOfTheClues:this.beforeTheStartOfTheClues,
					afterTheEndOfTheClues:this.afterTheEndOfTheClues,
					questionnaireLimitTip:this.questionnaireLimitTip
				}
				console.log(data);
				this.$request('/QuestionnaireSettingController/QuestionnaireSetting','POST',data)
				.then(res=>{
					uni.showToast({
						title:res.data.msg,
						icon:"success"
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			ipLimitChange(e){
				this.ipLimit = e.detail.value
			},
			weChatLimitChange(e){
				this.weChatLimit = e.detail.value
			},
			phoneLimitChange(e){
				this.phoneLimit = e.detail.value
			},
			ipChange(e){
				this.ipList.type = +e.detail.value
			},
			wechatChange(e){
				this.weChatList.type = +e.detail.value
			},
			phoneChange(e){
				this.phoneList.type = +e.detail.value
			},
			repeatAnswerChange(e){
				this.repeatAnswer = e.detail.value
			},
			back(){
				uni.navigateBack()
			},
			handlingSelect(){
				this.isshow = !this.isshow;
			},
			shareShow(){
				this.isShareShow = !this.isShareShow
			},
			handlingSetting(type){
				this.isshow = false
				this.isShareShow = false
				uni.navigateTo({
					url:'/components/setting/handling?type='+type+'&formid='+this.formid
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f5f5f5;
	}
	.uni-list-cell-db{
		width: 30%;
	}
	input{
		width: 70%;
		font-size: 30rpx;
	}
	.card{
		margin-top: 20rpx;
		h5{
			font-size: 25rpx;
			color: #bebebe;
			margin-left: 30rpx;
		}
	}
	.textStyle{
		font-size: 30rpx;
		color: #929292;
	}
	.radio{
		margin-left: 30rpx;
	}
	.custom{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.close {
		width: 60rpx;
		height: 60rpx;
		color: #ffffff;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #FFFFFF;
		position: relative;
		bottom: -40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.jumpButton{
		width: 70%;
		background-color: #80b156;
		color: white;
		margin-top: 40rpx;
	}
	.mybutton{
		width: 60%;
		margin-top: 20rpx;
	}
</style>